<template>
  <div class="oneDiv">
    <div class="sumDiv">
      <!-- 新增按钮和搜索框start -->
      <div class="headFromDiv">
        <div class="leftDiv">
          <el-button type="primary" @click="dialogFormVisible = true">新增文件分类</el-button>
          <el-button
                type="warning"
                icon="el-icon-download"
                @click="handleExport"
                >导出</el-button
              >
        </div>
        <div class="rightDiv">
          <el-row class="elrow">

            <el-col>
              <el-form :inline="true" :model="searchData" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="searchData.name" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="searchData.state" placeholder="全部状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="2"></el-option>
                    <!-- <el-option label="已封存" value="3"></el-option> -->
                  </el-select>
                </el-form-item> 
                <el-form-item>
                  <el-button @click="seachTableData()">搜索</el-button>
                  <el-button @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 新增按钮和搜索框end-->

      <!-- 表格信息展示start -->
      <div class="bottomDiv">
        <el-table :data="tableData" border style="width:95%;margin-left: 25px;"
          :header-cell-style="{ background: '#f4f4f4', color: 'black' }">
          <el-table-column prop="id" label="分类ID" width="190">
          </el-table-column>
          <el-table-column prop="name" label="分类名称" width="190">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="190">
            <template slot-scope="aa">
              <el-tag type="success" v-if="aa.row.state == 1">启用</el-tag>
              <el-tag type="warning" v-if="aa.row.state == 2">停用</el-tag>
              <!-- <el-tag type="info" v-if="aa.row.sealState == 3">已封存</el-tag>  -->
            </template>
            <el-tag></el-tag>
          </el-table-column>
          <el-table-column prop="remake" label="备注" width="189">
         </el-table-column>
          <!-- <el-table-column prop="turnoverTime" label="更新时间" width="189">
          </el-table-column> -->
          <el-table-column label="操作" width="290" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button v-if="scope.row.state==2" size="mini" @click="updateStateDocumentClass(scope.row,1)">上架</el-button>
              <el-button v-if="scope.row.state==1" size="mini" @click="updateStateDocumentClass(scope.row,2)">下架</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[2, 10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 表格信息展示end -->
    <!-- Form -->
<el-dialog :title=this.title :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="分类名称" >
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remake" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSeal()">确 定</el-button>

  </div>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 条查以及分页的表单
      title:"新增",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {},
      dialogFormVisible: false,
      searchData: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],



    }
  },
  created() {
    // 初始化条查
    this.seachTableData();
  },

  methods: {

    // 查询
    seachTableData() {
      this.searchData.currentPage = this.pageNum;
      this.searchData.pageSize = this.pageSize;
      axios.post("documentClass/queryDocumentClass", this.searchData)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          console.log(res);
        });
    },
    // 新增按钮事件
    addSeal() {
      axios.post("/documentClass/addDocumentClass",this.form)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("操作成功")
            this.seachTableData();
            this.dialogFormVisible = false;
          } else {
            this.$message.error("操作失败")
            this.seachTableData();
          }
        })
    },
/** 导出按钮操作 */
handleExport() {
      axios({
        url: "http://localhost:8030/documentClass/export/excel",
        method: "GET",
        responseType: "arraybuffer", // 接收二进制文件流
      }).then((res) => {
        const content = res.data;
        const blob = new Blob([content], { type: "application/octet-stream" });
        const fileName = "export.xlsx";
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, fileName);
        } else {
          const fileUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.target = "_blank";
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    //重置按钮
    resetQuery() {
      this.searchData = {}
      this.seachTableData();
    },
    // 编辑 弹框回显 修改标题走修改方法
    handleEdit(index, row) {
      this.title="修改"
      this.dialogFormVisible = true;
      console.log(row)
      this.form=row
      // this.$router.push({
      //   name: 'addOrUpdateSeal',
      //   params: row
      // });
    },
    // 删除
    handleDelete(index, row) {
      axios.post("/documentClass/deleteDocumentClass?id=" + row.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功")
            this.seachTableData();
          } else {
            this.$message.error("删除失败")
            this.seachTableData();
          }
        })
    },
    updateStateDocumentClass(row, state) {
      axios.post("/documentClass/updateStateDocumentClass?id=" + row.id+"&state="+state)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("成功")
            this.seachTableData();
          } else {
            this.$message.error("失败")
            this.seachTableData();
          }
        })
    },

    // 点击弹框的取消数据清空，事件关闭
    call() {
      this.AddHolidayFrom = {}
      this.centerDialogVisible = false
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.seachTableData();
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = val;
      this.seachTableData();
    },
    // 时间按钮递增
    handleChange(value) {
      console.log(value);
    }


  }
}
</script>

<style scoped>
.oneDiv {
  width: 90%;
  height: 100%;
  margin-top: -14px;
  background-color: rgba(244, 244, 244, 1);
  padding-top: 20px;
}

/* 装信息和条查的盒子 */
.sumDiv {
  width: 97%;
  height: 1000px;
  margin: auto;
}

/* 搜索框和按钮的盒子 */
.headFromDiv {
  width: 100%;
  height: 80px;
  margin: auto;
  background-color: #fff;
  border-radius: 9px;
}

/* 左侧的 */
.leftDiv {
  float: left;
  padding-top: 20px;
  padding-left: 25px;
}

.rightDiv {
  float: right;
  margin-top: 20px;
  margin-right: 15px;
}

.bottomDiv {
  width: 100%;
  height: 100%;
  margin: auto;
  margin-top: 20px;
  padding-top: 20px;
  background-color: #fff;
  border-radius: 9px;
}

/* 分页的盒子 */
.block {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}


.block {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}
</style>